<template>
	<view class="posterBoxSty" v-if="loading == true">
		<view class="titleSty">
			<div style="height: 50rpx;"></div>
			<Title :title="title" />
		</view>
		
		<image :src="imgSrc" mode="widthFix" class="posterSty"></image>
		<view class="saveBtn" @click="saveImage">
			将海报保存至手机
		</view>
	</view>
</template>

<script>
	import Title from './../components/title.vue'
	import {  getInvitationImg } from '@/api/user'
	
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: '邀请海报',
				loading:false,
				imgSrc: ''
			}
		},
		mounted() {
			this.getInvitationImg()
		},
		methods: {
			getInvitationImg() {
				uni.showLoading({
					title: '生成中'
				}, 10000);
				const that = this;
				that.$u.api.user.getInvitationImg().then(res => {
					that.imgSrc = res
					that.loading = true
					uni.hideLoading()
				})
			},
		  saveImage() {
			uni.saveImageToPhotosAlbum({
			  filePath: this.imgSrc, // 图片路径或URL，如果是网络图片，需要先下载到本地或服务器提供直接下载链接
			  success: function () {
				uni.showToast({
				  title: '保存成功',
				  icon: 'success',
				  duration: 2000
				});
			  },
			  fail: function (err) {
				uni.showModal({
				  title: '保存失败',
				  content: err.errMsg,
				  showCancel: false
				});
			  }
			});
		  }
		}
	}
</script>

<style lang="less">
	.posterBoxSty {
		width: 100%;
		height: 100%;
	}
.posterSty {
	width: 100vw;
	height: 100vh;
	position: relative;
	margin-top: 150rpx;
	// height: var(--status-bar-height);
}
.saveBtn {
	width: 85%;
	height: 94rpx;
	background: linear-gradient(90deg, #278AFF 0%, #52EEFF 100%);
	box-shadow: -4px 5px 6.5px 0px #C8FBFF75 inset;
	box-shadow: -2px -6px 9.9px 0px #71D0FF inset;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	line-height: 94rpx;
	letter-spacing: 3rpx;
	text-align: center;
	color: #FFFFFF;
	border-radius: 500rpx;
	margin: 0 auto;
	position: absolute;
	bottom: 130rpx;
	left: 60rpx;
}
.titleSty {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: #FFFFFF;
}
</style>
